<template>
   <div> 
         <div id="Title" class="flex">
            <img src="@/assets/logo.png" alt="" class="logo"> MTBLOG</div>
         <div class="flex Navi" >
               <router-link  class="NaviOne"   v-for="item in naviData" active-class="active"
                    :to="item.path" :key="item.id">
                    <!-- <img :src="require('@/assets/function/'+item.src)" class="icon"> -->
                    {{item.name}}
                    <div class="bottom"></div>
                </router-link>
         </div>
        <SmallNavi id="SmallNavi" class="flex"/>
        
   </div>
</template>
<script>
import SmallNavi from '../SmallNavi/SmallNavi.vue'
  export default 
  {
     name :'', 
     components:{SmallNavi},
     props:['naviData'],
      
  }
</script>
<style scoped lang='less'>
#Title{
    position: absolute;
    left: 100px; top: 0;
    height: 100%;

    font-size: 25px;
    font-weight: 600;
    color: white;

    .logo{
        width: 25px;
        height: 25px;
        margin-right: 10px;
    }
 
}
#SmallNavi{
    height: 100%;
    flex-wrap: nowrap;
    position: absolute;
    right: 100px;
    top: 0;
}
.Navi{
    width: 100%;
    height: 100%;
}

.NaviOne{
    margin: 5px;
    padding:2px 15px;
    height: 30px;
    line-height: 30px;
   
    color: white;
    font-size: 18px;
    font-weight: 600;
    border-radius: 20px;
   

    .icon{
       width: 25px;
       height:25px;
    }
    

    .bottom{
        margin-top: 2px;
        width: 0;
        height: 5px;
        background: var(--GeneralBackColor);
        transition-duration: 0.2s;
    }
}
.active{
    border-radius: 20px;
    background: var(--GeneralBackColor);
    box-shadow: 0 0 5px white;
    color: white;
}
.active:hover .bottom{
    display: none;
}
.NaviOne:hover .bottom{
    width:calc( 100% );
    box-shadow: 0 0 5px white;
}


</style>